<script setup lang="ts">
import { ref } from "vue";
import { list } from "@/views/DataMaintenance/IntegratedProject/components/TagProject/components/list";
import { useIntegratedProject } from "@/stores/modules/integratedProject";

const selected = ref(0);
const tabClick = ({ index }) => {
  selected.value = index;
  if (index === "0" && useIntegratedProject().zuHeXiangMuID) {
    if (useIntegratedProject().tagIsChoose === true) {
      useIntegratedProject().getBaoHanMingXiSel();
    }
  } else if (index === "1" && useIntegratedProject().zuHeXiangMuID) {
    if (useIntegratedProject().tagIsChoose === true) {
      useIntegratedProject().getBaoHanZuHeXiangMuSel();
    }
  }
};
</script>

<template>
  <div class="ApplicationForm">
    <el-tabs @tab-click="tabClick" stretch class="ApplicationForm-tabs">
      <template v-for="(item, index) of list" :key="item.key">
        <el-tab-pane :lazy="true">
          <template #label>
            <span>{{ item.title }}</span>
          </template>
          <component v-if="selected == index" :is="item.component" />
        </el-tab-pane>
      </template>
    </el-tabs>
  </div>
</template>

<style scoped lang="scss">
.ApplicationForm {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  .ApplicationForm-tabs {
    display: flex;
    flex: 1;
    flex-direction: column;
    :deep(.el-tabs__header) {
      height: 30px;
      padding: 0 0 15px;
      margin: 0;
      background: white;
    }
    :deep(.el-tabs__nav-wrap) {
      height: 45px;
      margin-bottom: 0;
    }
    :deep(.el-tabs__nav-wrap::after) {
      background: white;
    }
    :deep(.el-tabs__content) {
      flex: 1;
      overflow: hidden;
    }
    :deep(.el-tab-pane) {
      flex: 1;
      height: 100%;
    }
  }
}
</style>
